<template>
    <div class="person">
        <h2>当前求和为:{{ sum }}</h2>
        <button @click="add">数字+1</button>
    </div>
</template>

<script>
export default {
    /* eslint-disable */
    name: 'Person',
    data() { // 数据
        return {
            sum: 1
        }
    },
    methods: { // 方法
        add() {
            this.sum += 1
        }
    },
    /**
     * 创建(创建前,创建完毕)
     * 挂载(挂载前,挂载完毕)
     * 更新(更新前,更新完毕)
     * 销毁(销毁前,销毁完毕)
     */
    beforeCreate() {
        console.log('创建前');
    },
    created() {
        console.log('创建完毕');
    },
    beforeMount() {
        console.log('挂载前');
    },
    mounted() {
        console.log('挂载完毕');
    },
    beforeUpdate() {
        console.log('更新前,sum:' + this.sum);
    },
    updated() {
        console.log('更新完毕,sum:' + this.sum);
    },
    beforeDestroy() {
        console.log('销毁前');
    },
    destroyed() {
        console.log('销毁完毕');
    }
}

</script>

<style scoped>
.person {
    background-color: skyblue;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
}
</style>
